<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>金正股票在线交易中心</title>

  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/sb-admin-2.min.css">
  <link rel="stylesheet" href="angularjs/pagination.css">
  <link rel="stylesheet" href="layer/layer/theme/default/layer.css">
  <link rel="stylesheet" href="css/canvas.css">

  <!-- 重要的 Jquery 文件先导入 -->
  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="bootstrap/js/jquery-cookie/jquery.cookie.js"></script>

  <script src="angularjs/angular.min.js"></script>
  <script src="angularjs/pagination.js"></script>
  <script type="text/javascript" src="layui/layui.all.js"></script>
  <script>

    //定义一个模块 叫 market
    var app = angular.module("marketApp", []);
    app.controller("myCtrl", function ($scope, $http) {
      //1.调用页面数据初始化方法，每次页面刷新，从接口获取数据（或者从redis中获取）并显示给页面
      $scope.marketInit = function (stockCode) {
        $http.post("/cli/stock/pageInit?stockCode="+stockCode).success(function (data) {
          $scope.pageCompany=data.data[0].stockCompany;
          $scope.pageCode=data.data[0].stockCode;
          $scope.stockTotalprice=data.data[0].stockTotalprice;
          $scope.stockTurnover=data.data[0].stockTurnover;
          $scope.stockUpanddowns=data.data[0].stockUpanddowns;
          $scope.stockVolume=data.data[0].stockVolume;
          $scope.stockNewprice=data.data[1].stockNewprice;
          $scope.stockRMax=data.data[2].stockRMax;
          $scope.stockFMix=data.data[2].stockFMix;
        });
        $scope.bosInit(stockCode);
      };
      $scope.bosInit = function (stockCode) {
          // 因为中文乱码问题在
        $http.post("/trad/bos/getfive?code="+stockCode+"&type=买入").success(function (data) {
          $scope.bfive=data.data;
        });
        $http.post("/trad/bos/getfive?code="+stockCode+"&type=卖出").success(function (data) {
          $scope.sfive=data.data;
        });
      };
      //删除uid的cookie
      $scope.delCookie = function () {
          $.removeCookie('stock_user_id',{ path: '/'});
          $.removeCookie("stock_user_role",{path:'/'});
      };
      $scope.chedan666= function () {
            window.location.href="chedan.html?ran="+Math.random();
      };
      $scope.buy= function () {
          window.location.href="buy.html?ran="+Math.random();
      };
      $scope.maichu = function () {
          window.location.href = "maichu.html?ran=" + Math.random();
      };
      $scope.chengjiao= function () {
          window.location.href = "chengjiao.html?ran=" + Math.random();
      }
      $scope.weituo =function () {
          window.location.href = "weituo.html?ran=" + Math.random();
      }
      $scope.pos= function () {
          window.location.href = "pos.html?ran=" + Math.random();
      }
      $scope.setting=function () {
          window.location.href = "setting.html?ran=" + Math.random();
      }
      $scope.wallet=function () {
          window.location.href = "wallet.html?ran=" + Math.random();
      }
    });
  </script>

</head>

<body id="page-top" ng-app="marketApp" ng-controller="myCtrl" ng-init="marketInit('sz000001')">

<!-- 整体页面开始 -->
<div id="wrapper">

  <!-- 侧边栏开始 -->
  <ul class="navbar-nav bg-gray-800 sidebar sidebar-dark accordion" id="accordionSidebar">

    <!-- 公司logo与公司名区域 -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
      <div class="sidebar-brand-icon rotate-n-15">
        <i class="fas fa-laugh-wink"></i>
      </div>
      <div class="sidebar-brand-text mx-3">金正股份<sup>TM</sup></div>
    </a>

    <!-- 分割线 -->
    <hr class="sidebar-divider my-0 bg-gray-800">

    <!-- 首页模块 -->
    <li class="nav-item active">
      <a class="nav-link" href="index.html">
        <i class="fas fa-fw fa-tachometer-alt"></i>
        <span>首页</span></a>
    </li>

    <!-- 分割线 -->
    <hr class="sidebar-divider bg-gray-800">

    <!-- 股票行情头标题 -->
    <div class="sidebar-heading">
      股票市场
    </div>

    <!-- 热门股票模块 -->
    <li class="nav-item">
      <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
         aria-expanded="true" aria-controls="collapseTwo">

        <i class="fas fa-fire fa-cog"></i>

        <span>热门股票</span>
      </a>
<!--      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
        <div class="bg-white py-2 collapse-inner rounded">
          <h6 class="collapse-header">Custom Components:</h6>
          <a class="collapse-item" href="buttons.html">Buttons</a>
          <a class="collapse-item" href="cards.html">Cards</a>
        </div>
      </div>-->
    </li>

    <!-- 股票行情模块 -->
    <li class="nav-item">
      <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
         aria-expanded="true" aria-controls="collapseUtilities">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>股票行情</span>
      </a>
<!--      <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
        <div class="bg-white py-2 collapse-inner rounded">
          <h6 class="collapse-header">Custom Utilities:</h6>
          <a class="collapse-item" href="utilities-color.html">Colors</a>
          <a class="collapse-item" href="utilities-border.html">Borders</a>
          <a class="collapse-item" href="utilities-animation.html">Animations</a>
          <a class="collapse-item" href="utilities-other.html">Other</a>
        </div>
      </div>-->
    </li>

    <!-- 分割线 -->
    <hr class="sidebar-divider bg-gray-800">

    <!-- 交易系统头标题 -->
    <div class="sidebar-heading">
      交易中心
    </div>

    <!-- 股票买入模块 -->

    <li class="nav-item">
      <a class="nav-link" href="#" ng-click="buy()">
        <i class="fas fa-dollar-sign fa-2x"></i>
        <span>股票买入</span></a>
    </li>

    <!-- 股票卖出模块 -->
    <li class="nav-item">
      <a class="nav-link"  href="#" ng-click="maichu()">
        <i class="fas fa-outdent"></i>
        <span>股票卖出</span></a>
    </li>

    <!-- 股票撤销模块 -->
    <li class="nav-item">
      <a class="nav-link" href="#" ng-click="chedan666()">
        <i class="fas fa-window-close fa-table"></i>
        <span>股票撤销</span></a>
    </li>

    <!-- 分割线 -->
    <hr class="sidebar-divider bg-gray-800">
    <!--用户中心模块-->
    <div class="sidebar-heading">
      用户中心
    </div>
    <!-- 个人股票模块 -->
    <li class="nav-item">
      <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
         aria-expanded="true" aria-controls="collapsePages">
        <i class="fas fa-warehouse fa-folder"></i>
        <span>我的股票</span>
      </a>
      <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
        <div class="bg-white py-2 collapse-inner rounded">
          <h6 class="collapse-header">股仓</h6>
          <a class="collapse-item" href="#" ng-click="pos()"> <i class="fas fa-arrow-right"></i> 持仓</a>
          <a class="collapse-item" href="#" ng-click="chengjiao()"> <i class="fas fa-arrow-right"></i> 成交</a>
          <a class="collapse-item" href="#" ng-click="weituo()"> <i class="fas fa-arrow-right"></i> 委托</a>
        </div>
      </div>
    </li>

    <!-- 个人中心模块 -->
    <li class="nav-item">
      <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#center" aria-expanded="true" aria-controls="center">
        <i class="fas fa-user-astronaut fa-folder"></i>
        <span>个人中心</span>
      </a>
      <div id="center" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
        <div class="bg-gray-200 py-2 collapse-inner rounded">
          <a class="collapse-item" href="#" ng-click="setting()"> <i class="fas fa-user-cog">&nbsp;</i>设置</a>
          <a class="collapse-item" href="#" ng-click="wallet()"> <i class="fas fa-wallet">&nbsp;</i>钱包</a>
        </div>
      </div>
    </li>

    <!-- Divider -->
    <hr class="sidebar-divider d-none d-md-block bg-gray-800">

    <!-- Sidebar Toggler (Sidebar) -->
    <div class="text-center d-none d-md-inline">
      <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>

  </ul>
  <!-- 侧边栏结束 -->

  <!-- 右侧内容区域 -->
  <div id="content-wrapper" class="d-flex flex-column">

    <!-- Main Content -->
    <div id="content">

      <!-- 顶部框 -->
      <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

        <!-- Sidebar Toggle (Topbar) -->
        <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
          <i class="fa fa-bars"></i>
        </button>

        <!-- 顶部搜索框 -->
        <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
          <div class="input-group">
            <input type="text" class="form-control bg-light border-0 small" placeholder="证券代码/证券名称" id="codeInput" name="code"  list="codeDataList"
                   aria-label="Search" aria-describedby="basic-addon2" ng-model="stockCode">

            <datalist id="codeDataList">
              <option value="sh000001">上证指数(上海)</option>
              <option value="sh600958">东方证券(上海)</option>
            </datalist>

            <div class="input-group-append">
              <button class="btn bg-gray-300" type="button" id="codeSearch" ng-click="marketInit(stockCode)">
                <i class="fas fa-search fa-sm"></i>
              </button>
            </div>
          </div>
        </form>

        <!-- Topbar Navbar -->
        <ul class="navbar-nav ml-auto">

          <!-- Nav Item - Search Dropdown (Visible Only XS) -->
          <li class="nav-item dropdown no-arrow d-sm-none">
            <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-search fa-fw"></i>
            </a>
            <!-- Dropdown - Messages -->
            <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                 aria-labelledby="searchDropdown">
              <form class="form-inline mr-auto w-100 navbar-search">
                <div class="input-group">
                  <input type="text" class="form-control bg-light border-0 small"
                         placeholder="Search for..." aria-label="Search"
                         aria-describedby="basic-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-primary" type="button">
                      <i class="fas fa-search fa-sm"></i>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </li>
          <!-- 个人中心模块 -->
          <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="mr-2 d-none d-lg-inline text-gray-600 small">我的账户</span>
              <img class="img-profile rounded-circle" src="img/headpic.jpg">
            </a>
            <!-- Dropdown - User Information -->
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
              <a class="dropdown-item" href="openAccount.html">
                <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                开户
              </a>
              <a class="dropdown-item" href="login.html">
                <i class="fas fa-user-circle fa-sm fa-fw mr-2 text-gray-400"></i>
                登录
              </a>
              <a class="dropdown-item" href="register.html">
                <i class="fas fa-user-plus fa-sm fa-fw mr-2 text-gray-400"></i>
                注册
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                退出登录
              </a>
            </div>
          </li>
        </ul>
      </nav>
      <!-- 顶部框结束 -->

      <!-- Begin Page Content -->
      <div class="container-fluid">

        <!-- Page Heading -->
        <!--<div class="d-sm-flex align-items-center justify-content-between mb-4">-->
        <!--<div class="text-center"><h1 class="h3 mb-0 text-success text-left"><a class="rotate-15"></a><a ng-bind="pageCompany"></a></h1></div>-->
        <!--<div class="bg-gradient-success text-white p-3 rounded">CODE：<a ng-bind="pageCode"></a></div>-->
        <!--</div>-->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
          <div class="text-center"><h1 class="h3 mb-0 text-success text-left"><a class="rotate-15"></a><a class="font-weight-bold" ng-bind="pageCompany"></a></h1></div>
          <div class="bg-gradient-success text-white p-3 rounded">CODE：<a ng-bind="pageCode"></a></div>
        </div>

        <!-- 头部标签区域 -->
        <div class="row">

          <!-- Earnings (Monthly) Card Example -->
          <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">成交量
                    </div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800 ng-cloak"><a ng-bind="stockVolume"></a>手</div>
                  </div>
                  <div class="col-auto">
                    <i class="fas fa-calendar fa-2x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Earnings (Monthly) Card Example -->
          <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">成交额</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800 ng-cloak">￥<a ng-bind="stockTotalprice"></a></div>
                  </div>
                  <div class="col-auto">
                    <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Earnings (Monthly) Card Example -->
          <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">涨跌</div>
                    <div class="row no-gutters align-items-center">
                      <div class="col-auto">
                        <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800 ng-cloak"><a ng-bind="stockUpanddowns"></a>%</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-auto">
                    <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Pending Requests Card Example -->
          <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
              <div class="card-body">
                <div class="row no-gutters align-items-center">
                  <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">总市值</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">￥<a ng-bind="stockTotalprice"></a></div>
                  </div>
                  <div class="col-auto">
                    <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 并列图标和买卖盘信息区域 -->
        <div class="autoWidthRow">

          <!-- k线图区域 -->
          <div class="width903 leftPart">
            <div class="card shadow mb-4">
              <!-- k线图头部框区域 -->
              <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <div class="layui-btn-group dislikeFocus" style="margin: 0 auto;">
                  <button class="layui-btn layui-bg-red" id="get5MinutesData">5分钟</button>
                  <button class="layui-btn layui-btn-normal" id="get15MinutesData">15分钟</button>
                  <button class="layui-btn layui-btn-normal" id="get30MinutesData">30分钟</button>
                  <button class="layui-btn layui-btn-normal" id="get60MinutesData">60分钟</button>
                  <button class="layui-btn layui-btn-normal" id="moveToLeft">
                    <i class="layui-icon layui-icon-prev"></i>
                  </button>
                  <button class="layui-btn layui-btn-normal" id="seeMore">缩小</button>
                  <button class="layui-btn layui-btn-normal" id="seeLess">放大</button>
                  <button class="layui-btn layui-btn-normal" id="moveToRight">
                    <i class="layui-icon layui-icon-next"></i>
                  </button>
                  <button class="layui-btn layui-btn-normal" id="resetData">重置</button>
                  <button class="layui-btn layui-btn-normal" id="openAutoBeInt">使用吸附</button>
                  <a href="javascript:" id="getFocusA"> </a>
                </div>
              </div>
              <!-- k线图头图表区域 -->
              <div class="card-body">
                <div class="chart-area">

                  <div class="market">
                    <div class="content">
                      <span class="x1"></span><span class="x2"></span><span class="x3"></span>
                      <span class="x4"></span><span class="x5"></span><span class="x6"></span>
                      <span class="x7"></span><span class="x8"></span><span class="x9"></span>
                      <span class="y1"></span><span class="y2"></span><span class="y3"></span>
                      <div class="maDataDetail hide">&nbsp;&nbsp;
                        <span class="ma5">
                            MA5: <span id="ma5"></span>&nbsp;&nbsp;
                        </span>
                        <span class="ma10">
                            MA10: <span id="ma10"></span>&nbsp;&nbsp;
                        </span>
                        <span class="ma20">
                            MA20: <span id="ma20"></span>&nbsp;&nbsp;
                        </span>
                        <span class="ma60">
                            MA60: <span id="ma60"></span>&nbsp;&nbsp;
                        </span>
                      </div>
                      <div class="marketDataDetailLeft"></div>
                      <div class="marketDataDetailRight"></div>
                      <canvas id="myCanvasK" class="my-canvasK" width="768" height="256"></canvas>
                      <canvas id="myCanvasLine" class="my-canvasLine" width="768" height="256"></canvas>
                    </div>
                  </div>

                </div>
              </div>
              <script>
                  $(".marketDataDetailLeft").hide();
                  $(".marketDataDetailRight").hide();
                  $(".maDataDetail").hide();
              </script>
            </div>
          </div>

          <!-- 买卖盘区域 -->
          <!--<div class="col-xl-4 col-lg-4" >-->
          <div class="width350 rightPart" >
            <div class="card shadow mb-4">
              <!-- 买卖盘头部区域 -->
              <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between ">
                <h6 class="m-0 font-weight-bold text-primary">最新: <a class="ng-cloak">￥{{stockNewprice}}</a></h6>
                <h6 class="m-0 font-weight-bold text-info ng-cloak">涨幅: <a class="ng-cloak">￥{{stockUpanddowns}}</a></h6>
                <h6 class="m-0 font-weight-bold text-success ng-cloak">涨停: <a class="ng-cloak">￥{{stockRMax}}</a></h6>
                <h6 class="m-0 font-weight-bold text-danger ng-cloak">跌停: <a class="ng-cloak">￥{{stockFMix}}</a></h6>
                <div class="dropdown no-arrow">
                </div>
              </div>
              <!-- 买卖盘信息区域 -->
              <div class="card-body">
                <div class="chart-area">
                  <!--在要加的内容外面套上这样一个div ，可保持同行模板展示同步 class="chart-area"-->
                  <div class="table-responsive" style="font-size: 14px;">
                    <table class="table table-sm table-borderless text-center" id="dataTable" width="100%"
                           cellspacing="0">
                      <thead>
                      <tr>
                        <!--<th colspan="4">表头</th>-->
                      </tr>
                      </thead>

                      <tbody style="color: orangered">
                      <tr>
                        <th>卖盘</th>
                        <th>5</th>
                        <th ng-bind="sfive[4].stockBSQuantity"></th>
                        <th ng-bind="sfive[4].stockBSPrice"></th>
                      </tr>
                      <tr>
                        <th>卖盘</th>
                        <th>4</th>
                        <th ng-bind="sfive[3].stockBSQuantity"></th>
                        <th ng-bind="sfive[3].stockBSPrice"></th>
                      </tr>
                      <tr>
                        <th>卖盘</th>
                        <th>3</th>
                        <th ng-bind="sfive[2].stockBSQuantity"></th>
                        <th ng-bind="sfive[2].stockBSPrice"></th>
                      </tr>
                      <tr>
                        <th>卖盘</th>
                        <th>2</th>
                        <th ng-bind="sfive[1].stockBSQuantity"></th>
                        <th ng-bind="sfive[1].stockBSPrice"></th>
                      </tr>
                      <tr>
                        <th>卖盘</th>
                        <th>1</th>
                        <th ng-bind="sfive[0].stockBSQuantity"></th>
                        <th ng-bind="sfive[0].stockBSPrice"></th>
                      </tr>
                      <tr><th colspan="4"> <hr class="sidebar-divider my-0 bg-gradient-light"></th></tr>
                      </tbody>
                      <tfoot style="color:green">
                      <tr>
                        <th>买盘</th>
                        <th>1</th>
                        <th ng-bind="bfive[0].stockBSQuantity"></th>
                        <th ng-bind="bfive[0].stockBSPrice"></th>
                      </tr>
                      <tr>
                        <th>买盘</th>
                        <th>2</th>
                        <th ng-bind="bfive[1].stockBSQuantity"></th>
                        <th ng-bind="bfive[1].stockBSPrice"></th>
                      </tr>
                      <tr>
                        <th>买盘</th>
                        <th>3</th>
                        <th ng-bind="bfive[2].stockBSQuantity"></th>
                        <th ng-bind="bfive[2].stockBSPrice"></th>
                      </tr>
                      <tr>
                        <th>买盘</th>
                        <th>4</th>
                        <th ng-bind="bfive[3].stockBSQuantity"></th>
                        <th ng-bind="bfive[3].stockBSPrice"></th>
                      </tr>
                      <tr>
                        <th>买盘</th>
                        <th>5</th>
                        <th ng-bind="bfive[4].stockBSQuantity"></th>
                        <th ng-bind="bfive[4].stockBSPrice"></th>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.container-fluid -->

    </div>
    <!-- End of Main Content -->

    <!-- Footer -->
    <footer class="sticky-footer bg-white">
      <div class="container my-auto">
        <div class="copyright text-center my-auto">
          <span>Copyright &copy; Your Website 2020</span>
        </div>
      </div>
    </footer>
    <!-- End of Footer -->

  </div>
  <!-- 右侧内容区域结束 -->

</div>
<!-- 整体页面结束 -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
  <i class="fas fa-angle-up"></i>
</a>

<!-- 退出登录弹出 模态框区域 -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">系统消息</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">如果您已经准备好结束当前的会话，请选择下面的“确定”</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
        <a class="btn btn-primary" ng-click="delCookie()" href="login.html">确定</a>
      </div>
    </div>
  </div>
</div>

<!-- 资源引入开始 -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/sb-admin-2.min.js"></script>

<!-- 以下直至结束都是K线图的JS和JQ代码, 闲杂人等莫乱蹭 -->
<script>
    var rectWidth = 768;
    var rectHeight = 256;
    var currDataTime = 5;
    var currCode = "sz000001";
    var currDataLen = 1023;
    var currStartIndex = 0;
    var currEndIndex = 0;
    var dataSource = [];
    var marketData = [];
    var MAObject = [];
    var MA5  = [];
    var MA10 = [];
    var MA20 = [];
    var MA60 = [];
    var showOpenVal = [];
    var showHighVal = [];
    var showLowVal  = [];
    var showCloseVal = [];
    var maxData = 0;
    var minData = 0;
    var dataHigh = 0;
    var last_index_avg_close = 0;
    var needToAutoBeInt = false;
    var mySetIntervalFunction;
    var index;
    $(function() {
        var obj = $("#myCanvasK");          // 底部图层, 用于画 MA 均线和 K线
        var objLine = $("#myCanvasLine");   // 上层透明图层, 用于画需要根据鼠标移动不断刷新的辅助线
        var ctx = document.getElementById("myCanvasK").getContext("2d");
        var ctxLine = document.getElementById("myCanvasLine").getContext("2d");
        var clearLine = document.getElementById("myCanvasLine");    //用于刷新画布 (用原生JS对象自身高度重新赋值即可)
        //ajax 异步获取数据
        $.ajaxSettings.async = false;
        index = layer.load(2);
        $.ajax({
            url: "/cli/getMarketData?code=" + currCode + "&scale=" + currDataTime + "&datalen=" + currDataLen,
            type:"GET",
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            timeout: 10000,          // 设置超时时间
            success:function (data) {
                if(null == data.data || "null" == data.data) {
                    layer.msg("暂时没有数据, 可以尝试刷新",{icon:2});
                } else {
                    dataSource = data.data;
                }
            },
            error:function () {
                layer.msg("网络出错, 请刷新",{icon:2});
            }
        });
        layer.close(index);
        $.ajaxSettings.async = true;
        marketData = dataSource;
        currStartIndex = 0;
        currEndIndex = dataSource.length - 1;
        if(marketData.length == 0) {
            return;
        }
        initMaData();
        initMarketData();
        loadDataToCanvas();         //开始用数据画图
        initStockList();
        // $(function(){})页面初始化结束, 以下全是函数与事件


        //经过优化的 MA 平均值的计算算法
        function MA(index, count) {
            // 减掉最旧的, 再加上最新的即可, 没必要使用 for 循环来算
            last_index_avg_close += parseFloat(dataSource[index].close);
            last_index_avg_close -= parseFloat(dataSource[index - count].close);
            return last_index_avg_close / count;
        }

        function initStockList() {
            $.ajax({
                url: "/cli/getAllStock",
                type:"GET",
                contentType:"application/json;charset=UTF-8",
                dataType:"json",
                timeout: 10000,          // 设置超时时间
                success:function (data) {
                    var html = $("#codeDataList").html();
                    $(data.data).each(function (i, v) {
                        html += "<option value=\"sz" + v.stockCode + "\">" + v.stockCompany + "</option>"
                    });
                    $("#codeDataList").html(html);
                },
                error:function (data) {
                    layer.msg(data.msg,{icon:6});
                }
            });
        }
        function initMaData() {
            MA5 = [];
            MA10 = [];
            MA20 = [];
            MA60 = [];
            last_index_avg_close = 0;
            for(var i = 0; i < 5;i ++) {
                last_index_avg_close += parseFloat(dataSource[i].close);
                MA5[i] = 0;
            }
            for(var i = 5; i < dataSource.length; i ++) {
                MA5[i] = MA(i,5);
            }

            last_index_avg_close = 0;
            for(var i = 0; i < 10;i ++) {
                last_index_avg_close += parseFloat(dataSource[i].close);
                MA10[i] = 0;
            }
            for(var i = 10; i < dataSource.length; i ++) {
                MA10[i] = MA(i,10);
            }

            last_index_avg_close = 0;
            for(var i = 0; i < 20;i ++) {
                last_index_avg_close += parseFloat(dataSource[i].close);
                MA20[i] = 0;
            }
            for(var i = 20; i < dataSource.length; i ++) {
                MA20[i] = MA(i,20);
            }

            last_index_avg_close = 0;
            for(var i = 0; i < 60;i ++) {
                last_index_avg_close += parseFloat(dataSource[i].close);
                MA60[i] = 0;
            }
            for(var i = 60; i < dataSource.length; i ++) {
                MA60[i] = MA(i,60);
            }
            MAObject[0] = MA5;
            MAObject[1] = MA10;
            MAObject[2] = MA20;
            MAObject[3] = MA60;
        }

        function initMarketData() {
            // 找到数据中的最大值和最小值
            minData = parseFloat(marketData[0].low);
            maxData = parseFloat(marketData[0].high);
            for(var i = 0;i < marketData.length; i ++) {
                if(parseFloat(maxData) <= parseFloat(marketData[i].high)) {
                    maxData = parseFloat(marketData[i].high);
                }
                if(parseFloat(minData) > parseFloat( marketData[i].low)) {
                    minData = parseFloat(marketData[i].low);
                }

                //跟 MA 值比较大小(处理之后就不会存在部分 MA 线被画到画布外面的情况了)
                if(parseFloat(maxData) <= parseFloat(MAObject[0][i].high)) {
                    maxData = parseFloat(MAObject[0][i].high);
                }
                if(parseFloat(minData) > parseFloat( MAObject[0][i].low)) {
                    minData = parseFloat(MAObject[0][i].low);
                }
                if(parseFloat(maxData) <= parseFloat(MAObject[1][i].high)) {
                    maxData = parseFloat(MAObject[1][i].high);
                }
                if(parseFloat(minData) > parseFloat( MAObject[1][i].low)) {
                    minData = parseFloat(MAObject[1][i].low);
                }
                if(parseFloat(maxData) <= parseFloat(MAObject[2][i].high)) {
                    maxData = parseFloat(MAObject[2][i].high);
                }
                if(parseFloat(minData) > parseFloat( MAObject[2][i].low)) {
                    minData = parseFloat(MAObject[2][i].low);
                }
                if(parseFloat(maxData) <= parseFloat(MAObject[3][i].high)) {
                    maxData = parseFloat(MAObject[3][i].high);
                }
                if(parseFloat(minData) > parseFloat( MAObject[3][i].low)) {
                    minData = parseFloat(MAObject[3][i].low);
                }
            }
            // 将最大值和最小值进行向上向下取整
            if(maxData < 10) {
                // Nothing To Do
            } else if(maxData < 100) {
                maxData = Math.ceil(maxData);
                minData = Math.floor(minData);
            } else if(maxData < 1000) {
                maxData = Math.ceil(maxData / 10) * 10;
                minData = Math.floor(minData / 10) * 10;
            } else if(maxData < 10000) {
                maxData = Math.ceil(maxData / 100) * 100;
                minData = Math.floor(minData / 100) * 100;
            } else {
                maxData = Math.ceil(maxData / 1000) * 1000;
                minData = Math.floor(minData / 1000) * 1000;
            }
            // 算出要显示的数据的区间高度
            dataHigh = maxData - minData;

            // 处理数据转换成将要显示的像素高度, 用于画蜡烛图
            for(var i = 0;i < marketData.length; i++) {
                showOpenVal[i] = rectHeight * ((maxData - marketData[i].open) / dataHigh);
                showHighVal[i] = rectHeight * ((maxData - marketData[i].high) / dataHigh);
                showLowVal[i] = rectHeight * ((maxData - marketData[i].low) / dataHigh);
                showCloseVal[i] = rectHeight * ((maxData - marketData[i].close) / dataHigh);
            }
        }

        //加载数据到Canvas中
        function loadDataToCanvas() {
            ctx.fillStyle = "#FFFFFF";
            ctx.fillRect(0,0,rectWidth,rectHeight);

            ctx.beginPath();
            ctx.setLineDash([]);
            ctx.strokeStyle = "#0099FF";        //MA5的颜色

            ctx.lineWidth = 1;                  //设置线宽
            var showY;
            var nextX;
            var nextY;
            var stepOfX = rectWidth / marketData.length;
            var currX = stepOfX * ((currStartIndex==0?5:currStartIndex)>5?0:(5 - currStartIndex));
            var startIndex = currStartIndex>5?currStartIndex:5;
            for(var i = startIndex; i < currEndIndex; i ++) {
                showY = rectHeight * ((maxData - MA5[i]) / dataHigh);
                nextX = currX + stepOfX;
                nextY = rectHeight * ((maxData - MA5[i + 1]) / dataHigh);
                ctx.moveTo(currX + 0.5, showY);
                ctx.lineTo(nextX + 0.5, nextY);
                currX = nextX;
            }
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = "#FF9900";        //MA10的颜色
            currX = stepOfX * ((currStartIndex==0?10:currStartIndex)>10?0:(10 - currStartIndex));
            startIndex = currStartIndex>10?currStartIndex:10;
            for(var i = startIndex; i < currEndIndex; i ++) {
                showY = rectHeight * ((maxData - MA10[i]) / dataHigh);
                nextX = currX + stepOfX;
                nextY = rectHeight * ((maxData - MA10[i + 1]) / dataHigh);
                ctx.moveTo(currX + 0.5, showY);
                ctx.lineTo(nextX + 0.5, nextY);
                currX = nextX;
            }
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = "#FF00FF";        //MA20的颜色
            currX = stepOfX * ((currStartIndex==0?20:currStartIndex)>20?0:(20 - currStartIndex));
            startIndex = currStartIndex>20?currStartIndex:20;
            for(var i = startIndex; i < currEndIndex; i ++) {
                showY = rectHeight * ((maxData - MA20[i]) / dataHigh);
                nextX = currX + stepOfX;
                nextY = rectHeight * ((maxData - MA20[i + 1]) / dataHigh);
                ctx.moveTo(currX + 0.5, showY);
                ctx.lineTo(nextX + 0.5, nextY);
                currX = nextX;
            }
            ctx.stroke();

            ctx.beginPath();
            ctx.setLineDash([]);
            ctx.strokeStyle = "#009900";        //MA60的颜色

            // 如下标为 0 就从 60 开始画, 如果下标大于 60, 那就从 0 开始画, 如果在 0~60 之间, 那就跳过从下标到 60 之间的区间再开始画
            currX = stepOfX * ((currStartIndex==0?60:currStartIndex)>60?0:(60 - currStartIndex));   // 这都看不懂？请认真看注释
            startIndex = currStartIndex>60?currStartIndex:60;
            for(var i = startIndex; i < currEndIndex; i ++) {
                showY = rectHeight * ((maxData - MA60[i]) / dataHigh);
                nextX = currX + stepOfX;
                nextY = rectHeight * ((maxData - MA60[i + 1]) / dataHigh);
                ctx.moveTo(currX + 0.5, showY);
                ctx.lineTo(nextX + 0.5, nextY);
                currX = nextX;
            }
            ctx.stroke();

            var smallRectWidth = 0.7 * stepOfX;
            var topX = 0.65 * stepOfX;
            currX = stepOfX;
            for(var i = 1; i < marketData.length - 1; i ++) {
                ctx.beginPath();
                ctx.setLineDash([]);

                if(showOpenVal[i] <= showCloseVal[i]) {
                    // 开盘小于收盘, 上涨, 画红色轮廓的白色矩形
                    ctx.fillStyle = "#FFFFFF";          //填充颜色
                    ctx.strokeStyle = "#FF0000";        //轮廓颜色
                    ctx.moveTo(currX + 0.5, showHighVal[i]);
                    ctx.lineTo(currX + 0.5, showLowVal[i]);
                    ctx.fillRect(topX, showCloseVal[i], smallRectWidth,showCloseVal[i] - showOpenVal[i]);    //对内容的设置
                    ctx.strokeRect(topX, showCloseVal[i], smallRectWidth, showCloseVal[i] - showOpenVal[i]);  //对边框的设置
                } else {
                    // 开盘大于收盘, 下跌, 画绿色矩形
                    ctx.fillStyle = "#006600";          //填充颜色
                    ctx.strokeStyle = "#006600";        //轮廓颜色
                    ctx.moveTo(currX + 0.5, showHighVal[i]);
                    ctx.lineTo(currX + 0.5, showLowVal[i]);
                    ctx.fillRect(topX, showOpenVal[i], smallRectWidth, showCloseVal[i] - showOpenVal[i]);    //对内容的设置
                    ctx.strokeRect(topX, showOpenVal[i], smallRectWidth, showCloseVal[i] - showOpenVal[i]);  //对边框的设置
                }
                topX += stepOfX;
                currX += stepOfX;
                ctx.stroke();
            }
            drawTimeLine();
        }

        //画区间辅助线
        function drawTimeLine() {
            ctx.beginPath();
            ctx.setLineDash([3,3]);           //长度与间隔相等的虚线
            ctx.lineWidth = 0.5;              //设置线宽
            ctx.strokeStyle = "#000000";      //轮廓颜色
            var lineY;
            for(var i = 1;i < 4;i ++) {
                lineY = Math.round(rectHeight / 4) * (i);
                $(".y" + i).html((maxData - (lineY / rectHeight * dataHigh)).toFixed(1));
                $(".y" + i).css("top",lineY - $(".y" + i).height() / 2);
                $(".y" + i).css("left", -1*$(".y" + i).width());
                ctx.moveTo(0 + 0.5, lineY + 0.5);
                ctx.lineTo(rectWidth + 0.5, lineY + 0.5);
            }
            ctx.stroke();

            var minDateTime = marketData[0].day;
            var maxDateTime = marketData[marketData.length - 1].day;

            var lineNumber = 0;         //计算要画的辅助线的数量
            if((new Date(new Date(maxDateTime) - new Date(minDateTime))).getFullYear() - 1970 >= 2) {
                lineNumber = 9;
            } else if ((new Date(new Date(maxDateTime) - new Date(minDateTime))).getFullYear() - 1970 == 1){
                lineNumber = 6;
            } else if((new Date(new Date(maxDateTime) - new Date(minDateTime))).getMonth() == 0 &&  (new Date(new Date(maxDateTime) - new Date(minDateTime))).getDate() - 1 <= 10) {
                lineNumber = 3;
            } else {
                lineNumber = 4;
            }

            ctx.beginPath();
            ctx.setLineDash([3,3]);             //长度与间隔相等(虚线)
            ctx.lineWidth = 0.5;                //设置线宽
            ctx.strokeStyle = "#000000";        //轮廓颜色
            var lineX;
            var index;
            var i;
            for(i = 1;i < lineNumber + 1;i ++) {
                lineX = Math.round(rectWidth / (lineNumber + 1)) * (i);
                index = Math.floor(marketData.length * (lineX / rectWidth))
                $(".x" + i).html(getDateTimeByLineNum(new Date(marketData[index].day),lineNumber));
                $(".x" + i).css("left",lineX - $(".x" + i).width() / 2);
                $(".x" + i).css("bottom",-1 * rectHeight - $(".x" + i).height());
                ctx.moveTo(lineX + 0.5, 0);
                ctx.lineTo(lineX + 0.5, rectHeight);
            }
            for(i; i <= 9;i++) {
                $(".x" + i).html("");
            }
            ctx.stroke();
        }

        //根据辅助线的区间大小来确定辅助线下面要显示的时间格式
        function getDateTimeByLineNum(date,lineNum) {
            if(lineNum == 3) {
                return getDateTime(date);
            }
            if(lineNum == 9) {
                return getDateYear(date);
            }
            if(lineNum == 6) {
                return getDateMonth(date);
            }
            return getDateDay(date);
        }

        /* 获取日期格式 */
        function getDateYear(date) {
            return date.getFullYear();
        }
        /* 获取日期格式 */
        function getDateMonth(date) {
            var year = date.getFullYear();
            var month = (date.getMonth() + 1 < 10)? '0' + (date.getMonth() + 1): date.getMonth() + 1;
            return year + "-" + month;
        }
        /* 获取日期格式 */
        function getDateDay(date) {
            var year = date.getFullYear();
            var month = (date.getMonth() + 1 < 10)? '0' + (date.getMonth() + 1): date.getMonth() + 1;
            var day = (date.getDate() < 10)? '0' + date.getDate(): date.getDate();
            return year + "-" + month + "-" + day;
        }
        /* 获取日期时间格式*/
        function getDateTime(date) {
            var year = date.getFullYear();
            var month = (date.getMonth() + 1 < 10)? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1);
            var day = (date.getDate() < 10)? '0' + date.getDate() : date.getDate();
            var hh = (date.getHours() < 10)? '0' + date.getHours() : date.getHours();
            var mm = (date.getMinutes() < 10)? '0' + date.getMinutes(): date.getMinutes();
            var ss = (date.getSeconds() < 10)? '0' + date.getSeconds(): date.getSeconds();
            return year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
        }

        // 鼠标移动事件
        objLine.mousemove(function(event) {
            var relativeX = Math.round(event.pageX - $("#myCanvasK").offset().left);
            //var relativeY = Math.round(event.pageY - $("#myCanvasK").offset().top);

            clearLine.width = clearLine.width;  //清空画布
            ctxLine.lineWidth = 1;              //设置线宽
            //ctxLine.setLineDash([3,3]);       //使用虚线
            ctxLine.setLineDash([3]);           //长度与间隔相等的虚线
            //ctxLine.setLineDash();            //实线

            //获取鼠标所在X轴对应的数据下标
            var indexOfRelativeX = Math.floor(marketData.length * (relativeX / rectWidth))
            if(indexOfRelativeX > marketData.length - 1) {
                indexOfRelativeX = marketData.length - 1;          //保证下标在数据长度之内
            }
            indexOfRelativeX = indexOfRelativeX < 0?0:indexOfRelativeX;

            //编辑当前坐标的详细信息
            var html = "";
            html += "<div class='detailDate'> " + marketData[indexOfRelativeX].day + "</div>";
            html += "<div>开盘: " + marketData[indexOfRelativeX].open + "</div>";
            html += "<div>收盘: " + marketData[indexOfRelativeX].close + "</div>";
            html += "<div>最高: " + marketData[indexOfRelativeX].high + "</div>";
            html += "<div>最低: " + marketData[indexOfRelativeX].low + "</div>";
            $(".marketDataDetailLeft").html(html);
            $(".marketDataDetailRight").html(html);

            //控制当前坐标详细信息的显示位置
            if(relativeX < rectWidth / 2) {
                $(".marketDataDetailRight").show();
                $(".marketDataDetailLeft").hide();
            } else {
                $(".marketDataDetailLeft").show();
                $(".marketDataDetailRight").hide();
            }

            //显示当前坐标对应的各个 MA 值
            $("#ma5") .html(MAObject[0][indexOfRelativeX].toFixed(2));
            $("#ma10").html(MAObject[1][indexOfRelativeX].toFixed(2));
            $("#ma20").html(MAObject[2][indexOfRelativeX].toFixed(2));
            $("#ma60").html(MAObject[3][indexOfRelativeX].toFixed(2));
            $(".maDataDetail").show();

            var relativeY = marketData[indexOfRelativeX].close;
            var relativeY = Math.round(rectHeight * ((maxData - relativeY) / dataHigh));

            var stepOfX = rectWidth / marketData.length;
            if(needToAutoBeInt) {
                if(relativeX % stepOfX >= stepOfX / 2) {
                    relativeX += (stepOfX - relativeX % stepOfX);
                } else {
                    relativeX -= relativeX % stepOfX;
                }
            }
            //画出鼠标移动时对应坐标的辅助线
            ctxLine.moveTo(relativeX + 0.5, 0);
            ctxLine.lineTo(relativeX + 0.5, obj.height());
            ctxLine.moveTo(0, relativeY + 0.5);
            ctxLine.lineTo(obj.width(), relativeY + 0.5);
            ctxLine.stroke();
        });

        // 鼠标移出事件
        objLine.mouseout(function(event) {
            clearLine.width = clearLine.width;  //清空画布
            $(".marketDataDetailLeft").hide();   //隐藏详情信息
            $(".marketDataDetailRight").hide();
            $(".maDataDetail").hide();
        });

        var updateDataSources = function () {
            $.ajaxSettings.async = false;
            index = layer.load(2);
            $.ajax({
                url: "/cli/getMarketData?code=" + currCode + "&scale=" + currDataTime + "&datalen=" + currDataLen,
                type:"GET",
                contentType:"application/json;charset=UTF-8",
                dataType:"json",
                timeout: 10000,          // 设置超时时间
                success:function (data) {
                    if(null == data.data || "null" == data.data) {
                        layer.msg("暂时没有数据, 可以尝试刷新",{icon:2});
                    } else {
                        dataSource = data.data;
                    }
                },
                error:function (data) {
                    layer.msg(data.msg, {icon : 2});
                }
            });
            layer.close(index);
            $.ajaxSettings.async = true;
            marketData = dataSource;
            currStartIndex = 0;
            currEndIndex = dataSource.length - 1;
            if(marketData.length == 0) {
                return;
            }
            initMaData();
            initMarketData();
            loadDataToCanvas();

        };

        mySetIntervalFunction = updateDataSources;

        $("#codeSearch").click(function () {
            var isExistDataList = false;
            for (var i = 0; i < $("#codeDataList option").length; i++) {
                if ($("#codeInput").val() == $("#codeDataList option")[i].value) {
                    isExistDataList = true;
                    break;
                }
            }
            if (!isExistDataList) {
                layer.msg("你输入的证券代码不存在", {icon: 2});
                return;
            }
            currCode = $("#codeInput").val();
            $("#codeInput").val("");
            updateDataSources();
        });

        $("#get5MinutesData").click(function () {
            $("#get5MinutesData").removeClass("layui-btn-normal").addClass("layui-bg-red");
            $("#get15MinutesData,#get30MinutesData,#get60MinutesData").addClass("layui-btn-normal").removeClass("layui-bg-red");
            currDataTime = 5;
            updateDataSources();
        });

        $("#get15MinutesData").click(function () {
            $("#get5MinutesData,#get30MinutesData,#get60MinutesData").addClass("layui-btn-normal").removeClass("layui-bg-red");
            $("#get15MinutesData").removeClass("layui-btn-normal").addClass("layui-bg-red");
            currDataTime = 15;
            updateDataSources();
        });

        $("#get30MinutesData").click(function () {
            $("#get5MinutesData,#get15MinutesData,#get60MinutesData").addClass("layui-btn-normal").removeClass("layui-bg-red");
            $("#get30MinutesData").removeClass("layui-btn-normal").addClass("layui-bg-red");
            currDataTime = 30;
            updateDataSources();
        });

        $("#get60MinutesData").click(function() {
            $("#get5MinutesData,#get15MinutesData,#get30MinutesData").addClass("layui-btn-normal").removeClass("layui-bg-red");
            $("#get60MinutesData").removeClass("layui-btn-normal").addClass("layui-bg-red");
            currDataTime = 60;
            updateDataSources();
        });

        // 左移按钮的点击事件
        $("#moveToLeft").click(function () {
            var moveStep = Math.round(marketData.length * 0.2);
            if (currStartIndex == 0 && currEndIndex == dataSource.length - 1) {
                return;
            }
            if (currStartIndex - moveStep <= 0) {
                currStartIndex = 0;
                currEndIndex = currStartIndex + marketData.length;
            } else {
                currStartIndex -= moveStep;
            }
            currEndIndex = currStartIndex + marketData.length;
            updateMarketDataFromDataSourceByNewIndex();
            initMarketData();
            loadDataToCanvas();
        });

        // 缩小按钮的点击事件
        $("#seeMore").click(function() {
            var changeStep = Math.round(marketData.length * 0.1);
            if(marketData.length == dataSource.length) {
                layer.msg("已经缩小到极限",{icon:0});
                return;
            }
            if(marketData.length + 2 * changeStep > dataSource.length - 1) {
                currStartIndex = 0;
                currEndIndex = dataSource.length - 1;
            } else {
                if(currStartIndex - changeStep <= 0) {
                    currStartIndex = 0;
                } else {
                    currStartIndex -= changeStep;
                }
                if(currEndIndex + changeStep > dataSource.length - 1) {
                    currEndIndex = dataSource.length - 1;
                } else {
                    currEndIndex += changeStep;
                }
            }
            updateMarketDataFromDataSourceByNewIndex();
            initMarketData();
            loadDataToCanvas();
        });

        // 放大按钮的点击事件
        $("#seeLess").click(function() {
            var changeStep = Math.round(marketData.length * 0.1);
            if(marketData.length - 2 * changeStep < 40) {
                layer.msg("已经放大到极限",{icon:0});
            } else {
                currStartIndex += changeStep;
                currEndIndex -= changeStep;
                updateMarketDataFromDataSourceByNewIndex();
                initMarketData();
                loadDataToCanvas();
            }
        });

        // 右移按钮的点击事件
        $("#moveToRight").click(function() {
            if(currStartIndex == 0 && currEndIndex == dataSource.length - 1) {
                return;
            }
            var moveStep = Math.round(marketData.length * 0.2);
            if(currEndIndex + moveStep > dataSource.length - 1) {
                currEndIndex = dataSource.length - 1;
                currStartIndex = currEndIndex - marketData.length;
            } else {
                currEndIndex += moveStep;
            }
            currStartIndex = currEndIndex - marketData.length;
            updateMarketDataFromDataSourceByNewIndex();
            initMarketData();
            loadDataToCanvas();
        });

        // 重置按钮的点击事件
        $("#resetData").click(function() {
            currStartIndex = 0;
            currEndIndex = dataSource.length - 1;
            marketData = dataSource;
            MAObject[0] = MA5;
            MAObject[1] = MA10;
            MAObject[2] = MA20;
            MAObject[3] = MA60;
            initMarketData();
            loadDataToCanvas();
        });
        // 吸附按钮的点击事件
        $("#openAutoBeInt").click(function() {
            if(needToAutoBeInt) {
                $(this).addClass("layui-btn-normal");
                $(this).removeClass("layui-bg-red");
                $(this).html("使用吸附");
            } else {
                $(this).addClass("layui-bg-red");
                $(this).removeClass("layui-btn-normal");
                $(this).html("取消吸附");
            }
            needToAutoBeInt = !needToAutoBeInt;
        });

        $(".dislikeFocus button").focus(function () {
            $("#getFocusA").focus();
        });

        // 用 DataSource 的数据更新 market 的数据
        function updateMarketDataFromDataSourceByNewIndex() {
            marketData = [];
            MAObject[0] = [];
            MAObject[1] = [];
            MAObject[2] = [];
            MAObject[3] = [];
            for(var i = currStartIndex;i <= currEndIndex;i ++) {
                marketData[i - currStartIndex] = dataSource[i];
                MAObject[0][i - currStartIndex] = MA5[i];
                MAObject[1][i - currStartIndex] = MA10[i];
                MAObject[2][i - currStartIndex] = MA20[i];
                MAObject[3][i - currStartIndex] = MA60[i];
            }
        }

        // 更新 K线图 数据的定时器
        setInterval("mySetIntervalFunction()",60000 * 5); // 5分钟更新一次
    });
</script>
</body>

</html>
